<template>
  <view class="reading-detail-root">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-title"
        >({{ current }}/{{ swiperList.length }})One, two, three, four,
        five</view
      >
    </view>
    <view class="nav-bar">
      <view style="width: 36px" @click="goBack">←</view>

      <view class="nav-icons-collapsible">
        <!-- <view
          class="nav-icon main"
          :class="{ active: expanded }"
          @click="toggleIcons"
        >
          <text>⚙️</text>
        </view> -->
        <!-- <transition-group
          name="icon-fade"
          tag="div"
          class="icon-group"
          v-if="expanded"
        > -->
        <view
          class="nav-icon main"
          key="star"
          @click.stop="changeFavorite($event)"
          ><text>⚙️</text></view
        >
        <view
          class="nav-icon"
          :class="{ main: isFavorite }"
          key="star"
          @click.stop="changeFavorite($event)"
          ><text>★</text></view
        >
        <view class="nav-icon" key="trans"><text>译</text></view>
        <view class="nav-icon" key="book"><text>📖</text></view>
        <!-- </transition-group> -->
        <view v-if="expanded" class="nav-mask" @click="toggleIcons"></view>
      </view>
    </view>
    <!-- 内容区 -->
    <!-- <view class="content-area-horizontal">
      <view class="words-list-horizontal">
        <text>ONE</text>
        <text>TWO</text>
        <text>THREE</text>
        <text>FOUR</text>
        <text>FIVE</text>
      </view>
      <view class="center-avatar-horizontal">
        <view class="avatar-bg">
          <text class="avatar-emoji">🐷</text>
        </view>
      </view>
    </view> -->

    <!-- <wd-swiper
        custom-image-class="custom-image"
        :autoplay="false"
        :list="swiperList"
        v-model:current="current"
        :indicator="{ showControls: true }"
        indicatorPosition="bottom-right"
        @change="onChange"
      ></wd-swiper> -->
    <view
      style="
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <swiper class="swiper" circular :autoplay="false" @change="onChange">
        <swiper-item v-for="item in swiperList" :key="item">
          <view class="swiper-item uni-bg-red">
            <img :src="item" style="height: 70vh; width: 100vw" alt="" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 悬浮按钮 -->
    <view class="float-btn-group-horizontal">
      <view class="float-btn mic"><text>🎤</text></view>
      <view class="float-btn pause"><text>⏸️</text></view>
      <view class="float-btn play"><text>▶️</text></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { http } from "@/utils/http";
import { showToast } from "@/utils/toast";
import { onMounted, onUnmounted, ref } from "vue";



const expanded = ref(false);
const bookId = ref();
const isFavorite = ref();
const current = ref(1);
const swiperList = ref([]);
const bookData = ref();
var innerAudioContext = uni.createInnerAudioContext();
// const data = {
//   1:[1001,1002],
//   2:[]
// }
onLoad((options) => {
  bookId.value = options.id;
  getBookDetail();
  getUserFavorite();
  addReadingRecord();
  // console.log(data);
  
});

const onChange = (current) => {
  current.value = current.detail.current;
  console.log(current.value);

  playAudio(bookData.value[current.value].audio_url);
};
const getBookDetail = async () => {
  await http
    .get(`/admin-api/picturebook/book-context/get?id=${bookId.value}`)
    .then((res) => {
      bookData.value = JSON.parse(res.data.context);
      bookData.value = bookData.value.media_list;
      bookData.value.pop();
      bookData.value.forEach((item) => {
        swiperList.value.push(item.image_url);
      });
      playAudio(bookData.value[current.value].audio_url);
    });
};

const playAudio = (url) => {
  console.log("@@@@");

  innerAudioContext.destroy();
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.src = url; // 替换为你的音频文件路径
  innerAudioContext.play(); // 播放音频
};
function toggleIcons() {
  expanded.value = !expanded.value;
}

// 设置全屏
const setFullscreen = () => {
  // #ifdef APP-PLUS
  plus.navigator.setFullscreen(true);
  // #endif

  // #ifdef H5
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();
  }
  // #endif

  // #ifdef MP-WEIXIN
  // 微信小程序通过隐藏状态栏和导航栏实现全屏效果
  wx.hideHomeButton();
  wx.setNavigationBarColor({
    frontColor: "#ffffff",
    backgroundColor: "#000000",
    animation: {
      duration: 0,
      timingFunc: "easeIn",
    },
  });
  // 设置屏幕常亮
  wx.setKeepScreenOn({
    keepScreenOn: true,
  });
  // #endif
};

// 退出全屏
const exitFullscreen = () => {
  // #ifdef APP-PLUS
  plus.navigator.setFullscreen(false);
  // #endif

  // #ifdef H5
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
  // #endif

  // #ifdef MP-WEIXIN
  // 恢复屏幕设置
  wx.setKeepScreenOn({
    keepScreenOn: false,
  });

  // #endif
};
const goBack = () => {
  uni.navigateBack();
};

const changeFavorite = async (e) => {
  if (isFavorite.value) {
    http
      .delete(`/admin-api/picturebook/favorites/delete?BookId=${bookId.value}`)
      .then((res) => {
        isFavorite.value = false;
        showToast("取消收藏");
      });
  } else {
    const data = {
      userId: localStorage.getItem("token"),
      bookId: bookId.value,
      collectionType: 1,
    };
    http.post(`/admin-api/picturebook/favorites/create`, data).then((res) => {
      console.log(res);
      isFavorite.value = true;
      showToast("收藏成功");
    });
  }
};
const getUserFavorite = () => {
  http
    .get(
      `/admin-api/picturebook/favorites/getFavoritesByUserIdAndBookId?BookId=${bookId.value}`
    )
    .then((res) => {
      console.log(res);
      isFavorite.value = res.data;
    });
};

const addReadingRecord = async () => {
  const data = {
    userId: localStorage.getItem("token"),
    bookId: bookId.value,
  };
  http
    .post(`/admin-api/picturebook/reading-record/create`, data)
    .then((res) => {
      console.log("添加阅读记录回调", res);
    });
};
onMounted(() => {
  setFullscreen();
});

onUnmounted(() => {
  exitFullscreen();
});
</script>

<style scoped>
.reading-detail-root {
  /* padding-top: 72px; */
  background: #222;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  background: #333;
  color: #fff;
  padding: 0 12px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  text-align: center;
}
.nav-back {
  font-size: 32px;
  margin-right: 16px;
  cursor: pointer;
}
.nav-title {
  flex: 1;
  font-size: 22px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-icons-collapsible {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  opacity: 0.7;
  margin-left: 8px;
  transition: background 0.2s, color 0.2s;
}
.nav-icon.main {
  background: #ffc107;
  color: #222;
  opacity: 1;
  z-index: 2;
}
.icon-group {
  display: flex;
  align-items: center;
}
.icon-fade-enter-active,
.icon-fade-leave-active {
  transition: all 0.3s;
}
.icon-fade-enter-from,
.icon-fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
.nav-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.nav-icon.active {
  background: #ffc107;
  color: #222;
  opacity: 1;
}
.content-area-horizontal {
  margin: 32px auto 0 auto;
  width: 92vw;
  max-width: 1200px;
  height: 228px;
  background: #0cf;
  border-radius: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}
.words-list-horizontal {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #ffd600;
  text-align: left;
  letter-spacing: 2px;
}
.center-avatar-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-left: 180px;
}
.avatar-bg {
  width: 160px;
  height: 160px;
  background: #f9b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-emoji {
  font-size: 90px;
}
.cart-icon {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin-left: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.float-btn-group-horizontal {
  position: fixed;
  right: 48px;
  bottom: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  z-index: 20;
}
.float-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffc107;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  margin: 0;
}
.float-btn.play {
  background: #888;
  color: #fff;
}
.footer-bar-horizontal {
  position: absolute;
  right: 48px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-badge {
  background: #ff3b30;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  padding: 2px 10px;
}
.footer-stars {
  color: #ffd600;
  font-size: 22px;
}
.footer-link {
  color: #fff;
  font-size: 16px;
  opacity: 0.8;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
</style>
